.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding: 3px 12px 4px 12px;

  &__left {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  &__home {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    --size: 20px;
    width: var(--size);
    height: var(--size);
    color: var(--vscode-icon-foreground);
  }

  &__text {
    display: flex;
    align-items: center;
    height: 24px;
    font-family: var(--font-family-accent);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 1px;
    padding-top: 1px;
  }

  &__settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 5px;
    padding-left: 5px;

    &:hover {
      background-color: var(--vscode-toolbar-hoverBackground);
    }

    &__icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      --size: 20px;
      width: var(--size);
      height: var(--size);
      color: var(--vscode-icon-foreground);
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  padding-top: 4px;
}

.inner {
  display: flex;
  flex-direction: column;
  width: 100%;

  &__responses {
    margin: 0;
  }

  &__mode {
    display: flex;
    position: relative;
    background-color: var(--vscode-sideBar-background);
    border-radius: 10px;
    border: 1px solid var(--cwc-border-color);
    overflow: hidden;
    margin: 0 12px;

    > button {
      flex: 1;
    }

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 35px;
      background-color: var(--cwc-border-color-dimmed);
      pointer-events: none;
    }
  }

  &__buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
}

.bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-size: 12px;
  user-select: text;
  width: 100%; // For easier text selection
  padding-bottom: 12px;

  &__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  a:hover {
    text-decoration: underline;
  }
}
